<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Creation</title>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            margin: 0;
            font-size: 100%;
            color: #444;
            background: rgb(253, 180, 86);
            -webkit-font-smoothing: antialiased;
            -webkit-tap-highlight-color: transparent;
        }

        *, *:before, *:after {
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Hiragino Sans GB W3', sans-serif;
        }

        @-webkit-keyframes spin {
            from {
                -webkit-transform: rotate(0deg);
            }
            to {
                -webkit-transform: rotate(360deg);
            }
        }

        @keyframes spin {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        #nav-container {
            font-size: 2em;
            font-weight: bold;
            padding: 0.8em;
        }

        #nav-creation-contaioner {
            color: rgb(255, 255, 255);
            margin-left: 12%;
        }

        #nav-inspiration-contaioner {
            color: rgb(75, 160, 210);
            margin-left: 4%;

            /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
            animation-name: breath; /* 动画名称 */
            animation-duration: 3s; /* 动画时长3秒 */
            animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
            animation-iteration-count: infinite; /* 播放次数：无限 */

            /* Safari and Chrome */
            -webkit-animation-name: breath; /* 动画名称 */
            -webkit-animation-duration: 3s; /* 动画时长3秒 */
            -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
            -webkit-animation-iteration-count: infinite; /* 播放次数：无限 */
        }

        #logo-container {
            margin: 6% 0 auto;
            text-align: center;
        }

        #logo-container:hover {
            transform: scale(1.2, 1.2);
            transition-duration: 500ms;
        }

        #search-container {
            margin: 2% 12% 0 12%;
            height: 100px;
            border: 0.3em rgb(255, 255, 255) solid;
            border-radius: 0.5em;
        }

        #search-container:hover {
            -webkit-transition: border linear .2s, -webkit-box-shadow linear .5s;
            -webkit-box-shadow: 0 0 18px rgb(193, 56, 20);
        }

        #search-container input {
            border: none;
            background-color: rgb(253, 180, 86);
            padding: 1em;
            font-size: 1.2em;
            font-weight: bold;
            color: rgb(255, 255, 255);
            outline: none;
            height: 90px;
            width: 80%;
        }

        #search-result-container {
            margin: 2em 10em;
            font-size: 1em;
            color: rgb(255, 255, 255);
        }

        ::-webkit-input-placeholder {
            color: rgb(255, 255, 255);
        }

        #shengyin {
            margin-left: 7%;
            vertical-align: middle;
        }

        #shengyin:hover {
            transform: scale(1.2, 1.2);
        }

        #suosuo {
            margin-left: 2%;
            vertical-align: middle;
        }

        #suosuo:hover {
            transform: scale(1.2, 1.2);
        }

        @keyframes breath {
            from {
                opacity: 0.1;
            }
            /* 动画开始时的不透明度 */
            50% {
                opacity: 1;
            }
            /* 动画50% 时的不透明度 */
            to {
                opacity: 0.1;
            }
            /* 动画结束时的不透明度 */
        }

        @-webkit-keyframes breath {
            from {
                opacity: 0.1;
            }
            /* 动画开始时的不透明度 */
            50% {
                opacity: 1;
            }
            /* 动画50% 时的不透明度 */
            to {
                opacity: 0.1;
            }
            /* 动画结束时的不透明度 */
        }

        #tubiao-container {
            position: absolute;
        }

        #tubiao-container #tubiao-right-container {
            position: absolute;
            left: 20px;
            top: 10px;
            z-index: 999;
        }
    </style>
</head>
<body>
<div id="tubiao-container">
    <img id="tubiao-right-container" src="../static/image/logo/logo_orange.png">
</div>
<div id="nav-container">
    <span id="nav-creation-contaioner">Creation</span>
    <span id="nav-inspiration-contaioner">Inspiration</span>
</div>
<div id="logo-container">
    <img src="../static/image/three/CREATION.png">
</div>
<div id="search-container">
    <!--<img src="../static/image/three/kuang.png">-->
    <input id="content" type="text" placeholder="请输入文字或段落">
    <img id="shengyin" src="../static/image/three/shengyin.png">
    <img id="suosuo" src="../static/image/three/sousuo.png">
</div>
<div id="search-result-container">
    <span id="seg"></span>
    <br>
    <span id="tag"></span>
</div>
</body>
<script type="text/javascript" src="../static/js/jquery.min.js"></script>
<script>
    t = null;
    $('#content').bind('input propertychange', function () {
        clearTimeout(t);
        t = setTimeout(function () {
            $.ajax({
                type: 'GET',
                url: '/fenci',
                data: {
                    'content': $("input[type=text]").val()
                },
                success: function (res) {
                    console.log(res);
                    $("#seg").text("分词：" + res.result.seg);
                    $("#tag").text("关键字：" + res.result.tag);
                }
            });
        }, 1000);
    });
    $('#suosuo').click(function () {
        window.location.href = '/result?content=' + $("input[type=text]").val()
    });
</script>
</html>